<script setup lang='ts'>
import { computed, onMounted, ref } from 'vue'
import { getAlipaySdk } from "../../../api/api";
const count = ref(10)
const loading = ref(false)
const isLogin = ref(false)
const tableData = ref([])
const noMore = computed(() => count.value >= tableData.value.length)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
    loading.value = true
    setTimeout(() => {
        count.value += 10
        loading.value = false
    }, 2000)
}
const getData = async() => {
  const res = await getAlipaySdk({mail:localStorage.getItem('mail') as string})
  if(res.data.code !== '200') {
    localStorage.removeItem('token')
    localStorage.removeItem('mail')
    return
  }
  tableData.value = res.data.data
}
onMounted(()=>{
  getData()
})
</script>

<template>
    <div class="content">
        <div class="item">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>交易明细</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-empty style="height: 100%;" description="请先登陆" v-if="isLogin"/>
        <div class="infinite-list-wrapper" style="overflow: auto" v-if="!isLogin">
            <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="_id" label="数据id" width="300" />
                    <el-table-column prop="mail" label="用户邮箱" width="180" />
                    <el-table-column prop="money" label="购买金额" width="180" />
                    <el-table-column prop="id" label="订单编号"/>
                </el-table>
            </ul>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore">数据加载完毕</p>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.infinite-list-wrapper {
    height: 700px;
    margin-top: 20px;
}

.infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list-wrapper .list-item {
    box-sizing: border-box;
    padding: 10px;
    width: 98%;
    min-height: 100px;
    margin: auto;
    background-color: #f5f7fa;
    border-radius: 10px;
    color: black;
    display: grid;
    grid-template-columns: 90% 10%;
    transition: box-shadow 0.8s ease;
}

.list-item:hover {
    box-shadow: 0 0 5px 5px #ccc;
    cursor: pointer;
}

.infinite-list-wrapper .list-item+.list-item {
    margin-top: 10px;
}

p {
    color: #999;
    margin-top: 10px;
    text-align: center;
}
:deep(tr){
    position: relative;
    z-index: 0;
}
</style>